<template>
  <!-- 用户模块 -->
  <div class="mod-user">
    <div class="container" v-if="code == 200">
      <div class="user-hd">
        <div class="user-hd-pic">
          <img :src="user.avatarUrl" :alt="user.nickname" class="user-pic" />
        </div>
        <div class="user-hd-main">
          <div class="user-name-box">
            <h1 class="user-name">{{ user.nickname }}</h1>
            <span class="level">lv{{ level }}</span>
            <span class="gender-male" v-if="user.gender == 1">
              <i class="iconfont">&#xec4c;</i>
            </span>
            <span class="gender-female" v-if="user.gender == 2">
              <i class="iconfont">&#xec4d;</i>
            </span>
            <span class="user-btn send" v-if="showUserBtn">发私信</span>
            <span
              :class="[
                'user-btn',
                { 'user-btn-gray': user.followed },
                'follow',
              ]"
              v-if="showUserBtn"
            >
              {{ follow }}
            </span>
            <span
              class="user-btn artist"
              v-if="user.artistId"
              @click="clickArtist(user.artistId)"
            >
              查看歌手页
            </span>
            <span class="user-btn edit" v-if="!showUserBtn">编辑个人资料</span>
          </div>
          <ul class="user-info">
            <li class="user-info-item">
              <a href="javascript:;" @click="clickEvent(user.userId)">
                <strong>{{ user.eventCount }}</strong>
                <span>动态</span>
              </a>
            </li>
            <li class="user-info-item">
              <a href="javascript:;" @click="clickFollows(user.userId)">
                <strong>{{ user.follows }}</strong>
                <span>关注</span>
              </a>
            </li>
            <li class="user-info-item">
              <a href="javascript:;" @click="clickFans(user.userId)">
                <strong>{{ user.followeds }}</strong>
                <span>粉丝</span>
              </a>
            </li>
          </ul>
          <div class="user-signature" v-if="showSignature">
            个人介绍：{{ user.signature }}
          </div>
          <div class="user-message">
            <span class="user-place" v-if="user.province != 0">
              所在地区：{{ user.province | showCity(user.city) }}
            </span>
            <span class="user-age" v-if="user.birthday && user.birthday > 0">
              年龄：{{ user.birthday | showAge }}
            </span>
          </div>
        </div>
      </div>
      <div class="user-main">
        <div class="user-main-box" v-if="showSongs">
          <div class="user-main-hd">
            <h2 class="user-main-txt">听歌排行</h2>
            <span class="user-main-listen">累计听歌{{ listenSongs }}首</span>
            <span class="user-main-tip">i</span>
            <div class="user-main-tip-description">
              实际播放时间过短的歌曲将不纳入计算。
            </div>
            <div class="user-main-listen-type">
              <span
                :class="['type-week', { 'type-current': type == 1 }]"
                @click="changeType(1)"
                >最近一周</span
              >
              <i>|</i>
              <span
                :class="['type-all', { 'type-current': type == 0 }]"
                @click="changeType(0)"
                >所有时间</span
              >
            </div>
          </div>
          <div class="user-main-content">
            <record-song-list :songs="songs"></record-song-list>
          </div>
        </div>
        <div class="user-main-box" v-if="showCreate">
          <div class="user-main-hd">
            <h2 class="user-main-txt">
              {{ who }}创建的歌单({{ createLists.length }})
            </h2>
          </div>
          <div class="user-main-content">
            <ul class="user-playlists clearfix">
              <li
                class="user-playlists-item"
                v-for="item in createLists"
                :key="item.id"
              >
                <play-list :item="item"></play-list>
              </li>
            </ul>
          </div>
        </div>
        <div class="user-main-box" v-if="showLiked">
          <div class="user-main-hd">
            <h2 class="user-main-txt">
              {{ who }}收藏的歌单({{ likedLists.length }})
            </h2>
          </div>
          <div class="user-main-content">
            <ul class="user-playlists clearfix">
              <li
                class="user-playlists-item"
                v-for="item in likedLists"
                :key="item.id"
              >
                <play-list :item="item"></play-list>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <no-resource v-if="code == 404"></no-resource>
  </div>
</template>

<script>
import { changeAge } from "common/age.js";
import { city } from "common/city.js";
import RecordSongList from "components/songlist/RecordSongList.vue";
import PlayList from "components/playlist/PlayList.vue";
import NoResource from "views/notfound/NoResource";

export default {
  components: {
    RecordSongList,
    PlayList,
    NoResource,
  },
  data() {
    return {
      user: {},
      level: 1,
      listenSongs: 0,
      playlists: [],
      createLists: [],
      likedLists: [],
      // 用来标记创建的歌单数
      flag: 0,
      // 最近播放
      songs: [],
      // 标记最近播放还是所有播放 1：最近 0：所有
      type: 1,
      id: "",
      showSongs: false,
      showCreate: false,
      showLiked: false,
      showSignature: false,
      // 发私信、关注、编辑个人资料
      showUserBtn: true,
      follow: "关注",
      who: "",
      code: 200,
    };
  },
  filters: {
    // 过滤器转换时间戳
    showAge(data) {
      return changeAge(data);
    },
    showCity(p, c) {
      return city(p, c);
    },
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getUserDetail();
    this.getPlaylists();
    this.getRecord();
    // console.log(this.$store.state.profile.userId);
    if (this.$store.state.profile.userId == this.id) {
      // 打开登录账号的页面
      this.showUserBtn = false;
    } else {
      // 打开其他人的页面
      this.showUserBtn = true;
    }
  },
  methods: {
    clickEvent(id) {
      this.playUserEvent(id);
    },
    clickFollows(id) {
      this.playUserFollows(id);
    },
    clickFans(id) {
      this.playUserFans(id);
    },
    clickArtist(id) {
      this.playArtistDetail(id);
    },
    changeType(type) {
      this.type = type;
      console.log(this.type);
      this.getRecord();
    },
    getRecord() {
      this.axios({
        url: "/user/record?uid=" + this.id + "&type=" + this.type,
      })
        .then((res) => {
          if (this.type == 1) {
            this.songs = res.data.weekData.slice(0, 10);
            console.log(this.songs);
          } else {
            this.songs = res.data.allData.slice(0, 10);
            console.log(this.songs);
          }
          if (this.songs.length > 0) {
            this.showSongs = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getPlaylists() {
      this.axios({
        url: "/user/playlist?limit=1000&uid=" + this.id,
      })
        .then((res) => {
          for (let item of res.data.playlist) {
            if (item.creator.userId == this.id) {
              this.flag++;
            } else {
              break;
            }
          }
          this.createLists = res.data.playlist.slice(0, this.flag);
          this.likedLists = res.data.playlist.slice(this.flag);
          if (this.createLists.length > 0) {
            this.showCreate = true;
          }
          if (this.likedLists.length > 0) {
            this.showLiked = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getUserDetail() {
      this.axios({
        url: "/user/detail?uid=" + this.id,
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.code = 200;
            this.user = res.data.profile;
            this.level = res.data.level;
            this.listenSongs = res.data.listenSongs;
            if (res.data.profile.signature != "No introduction") {
              this.showSignature = true;
            }
            if (this.user.followed) {
              this.follow = "已关注";
            } else {
              this.follow = "关注";
            }
            if (this.showUserBtn) {
              this.who = this.user.nickname;
            } else {
              this.who = "我";
            }
          }
          if (res.data.code == 404) {
            this.code = 404;
          }
        })
        .catch((err) => {
          console.log(err);
          this.code = 404;
        });
    },
  },
};
</script>

<style>
.mod-user {
  padding-top: 50px;
  background-color: var(--color-theme-light-5);
}
.mod-user .user-hd {
  position: relative;
  min-height: 250px;
  margin-bottom: 50px;
}
.mod-user .user-hd-pic {
  position: absolute;
  left: 0;
  top: 0;
  width: 250px;
  height: 250px;
  padding: 5px;
  border: 2px solid #ccc;
}
.mod-user .user-pic {
  width: 100%;
  height: 100%;
}
/* user-hd-main */
.mod-user .user-hd-main {
  position: relative;
  margin-left: 300px;
  min-height: 250px;
  overflow: hidden;
}
.mod-user .user-name-box {
  position: relative;
  height: 80px;
  line-height: 80px;
  border-bottom: 1px solid #999;
}
.mod-user .user-name {
  float: left;
  margin: 0;
  font-size: 26px;
  height: 80px;
  line-height: 80px;
  font-weight: 400;
}
.mod-user .user-name-box .level {
  margin-left: 20px;
  padding: 1px 5px;
  color: red;
  border: 1px solid red;
  border-radius: 15px;
}
.user-name-box .gender-male .iconfont,
.user-name-box .gender-female .iconfont {
  margin-left: 10px;
  font-size: 26px;
}
.user-name-box .gender-male {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  color: rgb(38, 166, 228);
}
.user-name-box .gender-female {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  color: rgb(255, 190, 216);
}
.mod-user .user-name-box .send,
.mod-user .user-name-box .follow {
  margin-left: 20px;
}
.mod-user .user-name-box .artist,
.mod-user .user-name-box .edit {
  float: right;
  margin-top: 24px;
  margin-left: 10px;
  line-height: 16px;
}
.mod-user .user-name-box .user-btn {
  padding: 6px 8px;
  color: #000;
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #999;
  cursor: pointer;
}
.mod-user .user-name-box .user-btn.user-btn-gray {
  color: #ccc;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
}
.mod-user .user-info {
  margin: 20px 0;
  width: 100%;
  height: 50px;
}
.mod-user .user-info-item {
  float: left;
  padding: 0 10px;
  min-width: 80px;
  height: 50px;
  text-align: center;
  border-right: 1px solid #999;
}
.mod-user .user-info-item a {
  display: inline-block;
  position: relative;
  color: #666;
}
.mod-user .user-info-item:hover a {
  color: var(--color-theme);
}
.mod-user .user-info-item strong {
  display: block;
  font-size: 24px;
  cursor: pointer;
}
.mod-user .user-info-item span {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  cursor: pointer;
}
.mod-user .user-signature {
  min-height: 50px;
  line-height: 22px;
  font-size: 14px;
  white-space: normal;
}
.mod-user .user-message {
  height: 30px;
  line-height: 30px;
}
.mod-user .user-message .user-age {
  margin-left: 20px;
}
.mod-user .user-main {
  width: 100%;
  min-height: 207px;
}
.mod-user .user-main-box {
  width: 100%;
  margin-bottom: 50px;
}
.mod-user .user-main-hd {
  position: relative;
  margin-bottom: 20px;
  height: 50px;
  line-height: 50px;
  border-bottom: 2px solid var(--color-theme);
}
.mod-user .user-main-txt {
  float: left;
  font-weight: 400;
}
.user-main-listen {
  margin-left: 20px;
  font-size: 14px;
  color: #999;
}
.mod-user .user-main-tip {
  display: inline-block;
  margin-left: 10px;
  height: 16px;
  line-height: 16px;
  width: 16px;
  font-size: 14px;
  text-align: center;
  border: 2px solid #999;
  color: #999;
  border-radius: 50%;
  cursor: pointer;
}
.mod-user .user-main-tip:hover {
  background-color: #f2f2f2;
}
.mod-user .user-main-tip:hover + .user-main-tip-description {
  display: block;
}
.mod-user .user-main-tip-description {
  display: none;
  position: absolute;
  top: 44px;
  left: 200px;
  padding: 10px;
  line-height: 20px;
  font-size: 14px;
  color: #999;
  background-color: #fff;
  border-radius: 10px;
  z-index: 11;
}
.mod-user .user-main-tip-description::before {
  position: absolute;
  top: -20px;
  left: 33px;
  content: "";
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom: 10px solid #fff;
}
.mod-user .user-main-listen-type {
  float: right;
  color: #666;
  font-size: 13px;
}
.mod-user .user-main-listen-type i {
  margin: 0 10px;
  width: 5px;
  height: 100%;
}
.mod-user .user-main-listen-type span {
  cursor: pointer;
}
.type-current {
  color: #000;
}
.mod-user .user-playlists {
  margin-right: -20px;
}
.mod-user .user-playlists-item {
  float: left;
  width: 20%;
}
</style>